<!-- @format -->

<template>
  <div class="about">
    <div class="left">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" width="100"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.em"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status">
            <el-option label="激活" value="激活"></el-option>
            <el-option label="未激活" value="未激活"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button type="reset">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="right">
      <div>
        <el-input placeholder="请输入信息" type="text" v-model="form.input">
        </el-input>
        <el-button @click="searchItem(form.input)">搜索</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="80"> </el-table-column>
        <el-table-column prop="em" label="邮箱" width="150"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="date" label="时间" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click="deleteInformation(scope.$index)"
              type="text"
              size="small"
            >
              删除</el-button
            >
            <el-button @click="kan(scope.row)" typ size="small">
              查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr1: [],
      form: {
        input: '',
        name: '',
        age: '',
        em: '',
        date: '',
        status: '',
        sex: '',
        ulList: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      tableData: []
    };
  }, //本地存储
  created() {
    let msg = JSON.parse(localStorage.getItem('msg'));
    if (msg) {
      this.tableData = msg;
    }
    this.ulList = msg;
  },
  methods: {
    //添加数据
    onSubmit() {
      let arr2 = JSON.parse(localStorage.getItem('msg'));
      if (arr2) {
        arr2.push(this.form);
        localStorage.setItem('msg', JSON.stringify(arr2));
      } else {
        this.arr1.push(this.form);
        localStorage.setItem('msg', JSON.stringify(this.arr1));
      } // 初次渲染

      var msg = JSON.parse(localStorage.getItem('msg'));
      if (msg) {
        this.tableData = msg;
      }
    },
    deleteInformation(row) {
      var arr = this.tableData.splice(row, 1);
      localStorage.setItem('msg', JSON.stringify(this.tableData));
    },
    kan(row) {
      this.form = row;
    },
    searchItem(input) {
      console.log(input);
      this.tableData = this.ulList;

      if (input == '男' || input == '女') {
        console.log(1);
        this.tableData = this.tableData.filter(item => {
          console.log(item);
          return item.sex.indexOf(input) > -1;
        });
      } else if (input === '激活' || input == '未激活') {
        console.log(22);
        this.tableData = this.tableData.filter(item => {
          return item.status.indexOf(input) > -1;
        });
      } else {
        this.tableData = this.tableData.filter(item => {
          return item.name.indexOf(input) > -1;
        });
      }
      // console.log(this.tableData);

      // let msg = this.tableData;

      // console.log(msg);

      console.log(this.tableData);
      // msg= msg.include()
    }
  }
};
</script>
<style lang="less" scoped="scoped">
.about {
  display: flex;
}
.left {
  width: 500px;
}
.right {
  overflow: auto;
  // overflow-x: auto;
  flex: 1;
  margin-left: 80px;
}
</style>
